<template>
    <div>
       <div class="header">
           <h3>{{info.title}}</h3>
           <div class="subtitle">
               <span>发表时间:{{info.add_time|dateFormat}}</span>
               <span>点击:{{info.click}}</span>
           </div>
       </div>
       <hr>
       
       <vue-preview :slides="list" @close="handleClose"></vue-preview>
       <div class="content" v-html="info.content"></div>
       <ping-lun :id="id"></ping-lun>
    </div>
</template>
<script>
import PingLun from "../subcomponents/PingLun.vue";
export default {
    data(){
        return{
           id:this.$route.params.id,
           info:{},
           list:[]
        }
    },
    components:{
       PingLun
    },
    created(){
        this.getImageInfo();
        this.getThumImage();
    },
    methods:{
        getImageInfo(){
           this.$http.get("api/getimageinfo/"+this.id).then((result)=>{
               if(result.body.status===0){
                  this.info = result.body.message[0];
               }else{
                   alert("请求失败")
               }
           }) 
        },
        getThumImage(){
            this.$http.get("api/getthumimages/"+this.id).then((result)=>{
                if(result.body.status===0){
                    result.body.message.forEach((item)=>{
                        item.w=600;
                        item.h=400;
                        item.msrc=item.src;
                    })
                    this.list=result.body.message;
                }else{
                    alert("请求失败")
                }
            })
        },
        handleClose () {
        console.log('close event')
      }
    }
}
</script>
<style>
  .header h3{
      font-size:14px;
      color:deepskyblue;
      text-align:center;
      margin-top:15px;
  }
  .header .subtitle{
      display:flex;
      justify-content: space-between;
      font-size:13px;
      padding:0px 8px;
  }
  .content{
      font-size:14px;
      line-height:30px;
  }
</style>

